<!--
 * @Author: 晟松
 * @Date: 2021-12-05 16:47:48
 * @LastEditors: 晟松
 * @LastEditTime: 2022-02-04 13:18:28
 * @FilePath: \volunteer-vue3-admin\src\views\schoolPages\test1.vue
 * @Description: test
-->

<!--
 * @Author: 晟松
 * @Date: 2021-12-05 16:47:48
 * @LastEditors: 晟松
 * @LastEditTime: 2022-02-04 13:04:46
 * @FilePath: \volunteer-vue3-admin\src\views\schoolPages\AllStudent.vue
 * @Description: 自己所管理的所有学生
-->

<template>
    <!-- 注意：如果这里存在注释，即在template最顶层，会出现页面无法显示的情况，似乎注释也会破坏只能呢过有一个根节点的状态 -->
    <div>
        <div class="head">
            <el-row align="middle" justify="start" :gutter="20" class="row">
                <el-col :span="7" class="title">用户名称</el-col>
                <el-col :span="16">
                    <el-input v-model="nameInput" placeholder="请输入用户名称" clearable />
                </el-col>
            </el-row>
            <el-row align="middle" justify="start" :gutter="20" class="row">
                <el-col :span="7" class="title">手机号码</el-col>
                <el-col :span="16">
                    <el-input v-model="phoneInput" placeholder="请输入用户手机号码" clearable />
                </el-col>
            </el-row>
            <el-row align="middle" justify="start" :gutter="20" class="row">
                <el-col :span="7" class="title">用户状态</el-col>
                <el-col :span="16">
                    <el-select
                        v-model="available"
                        class="m-2"
                        placeholder="用户状态"
                        size="large"
                        clearable
                    >
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-col>
            </el-row>
            <el-row align="middle" justify="start" :gutter="20" class="row">
                <el-col :span="20">
                    <el-button type="primary" size="small" @click="serach">搜索</el-button>
                    <el-button type="info" size="small" @click="reset">重置</el-button>
                </el-col>
            </el-row>

            <el-row :gutter="10" class="allBtn">
                <el-col :span="1.1">
                    <el-button type="primary" plain icon="plus" size="mini">新增</el-button>
                </el-col>
                <el-col :span="1.1">
                    <el-button type="success" plain icon="edit" size="mini">修改</el-button>
                </el-col>
                <el-col :span="1.1">
                    <el-button type="danger" plain icon="delete" size="mini">删除</el-button>
                </el-col>
                <el-col :span="1.1">
                    <el-button type="warning" plain icon="upload" size="mini">导入</el-button>
                </el-col>
                <el-col :span="1.1">
                    <el-button type="warning" plain icon="download" size="mini">导出</el-button>
                </el-col>
            </el-row>
        </div>
        <div class="show">
            <el-table :data="data.showList" style="width: 100%" stripe>
                <el-table-column type="selection" width="55" />
                <el-table-column label="id">
                    <template #default="scope">{{ scope.row.id }}</template>
                </el-table-column>
                <el-table-column property="userName" label="姓名" />
                <el-table-column
                    property="gender"
                    label="性别"
                    show-overflow-tooltip
                    :formatter="genderTrans"
                />
                <el-table-column property="phone" label="手机号" align="center" width="150" />
                <el-table-column property="major" label="专业" />
                <el-table-column property="grade" label="年级" :formatter="gradeTrans" />
                <el-table-column property="studentId" label="学号" width="150" align="center" />

                <el-table-column label="状态">
                    <template #default="scope">
                        <el-switch v-model="scope.row.available" />
                    </template>
                </el-table-column>
                <el-table-column property="createdAt" label="创建时间" width="200" align="center" />
                <el-table-column align="center" width="230">
                    <template #header>操作</template>
                    <template #default="scope">
                        <el-button
                            type="text"
                            size="small"
                            icon="edit"
                            class="optionBtn"
                            @click="handleEdit(scope.$index, scope.row)"
                        >编辑</el-button>
                        <el-button
                            type="text"
                            size="small"
                            icon="delete"
                            @click="handleDelete(scope.$index, scope.row)"
                        >删除</el-button>
                        <el-button
                            type="text"
                            size="small"
                            icon="lock"
                            @click="handleEdit(scope.$index, scope.row)"
                        >修改密码</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script setup>
import { getAllResident } from "@/myApi/community";
import {
    getAllStudent,
    getAllCollegeStudent,
    getAllCollegeAdmin,
    searchAllCollegeStudent,
    searchAllStudent,
} from "@/myApi/school";
import { getCollegeAllStudentVol, getAllResidentVol } from "@/myApi/vol";
import { getAllSchool, getAllCommunity } from "../../myApi/user";
import { reactive, ref, computed, onBeforeMount, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

let mine = reactive({ student: { name: "蒋晟松" } });

// const store = useStore();
// const router = useRouter();
// let identity = computed(() => store.getters.identity);
// // console.log("identity: ", identity.value);
// let userAdmin = computed(() => store.getters.user);
// let schoolAdmin = computed(() => store.getters.schoolAdmin);

// let nameInput = ref("");
// let phoneInput = ref("");
// let available = ref();
// let options = [
//     {
//         value: true,
//         label: "正常",
//     },
//     {
//         value: false,
//         label: "停用",
//     },
// ];

// 在table中转换一下性别为中文
// const genderTrans = (row, column, cellValue, index) => {
//     if (cellValue == 'male') {
//         return '男'
//     } else if (cellValue == 'female') {
//         return '女'
//     } else {
//         return '无'
//     }
// }
// // 转换一下年级
// const gradeTrans = (row, column, cellValue, index) => {
//     let res = ''
//     switch (cellValue) {
//         case 1: {
//             res = '大一'
//             break
//         }
//         case 2: {
//             res = '大二'
//             break
//         } case 3: {
//             res = '大三'
//             break
//         } case 4: {
//             res = '大四'
//             break
//         } case 5: {
//             res = '其他'
//             break
//         }
//     }
//     return res
// }
// 存储所有数据的对象
let data = reactive({ allStudent: [], showList: [] });
let limitOffset = reactive({ limit: 10, offset: 0 });
// onMounted(async () => {
//     if (schoolAdmin.value) {
//         data.allStudent = await getAllStudent({ id: userAdmin.value.id });
//     } else {
//         data.allStudent = await getAllCollegeStudent({
//             id: userAdmin.value.id,
//         });
//     }
//     console.log("data.allStudent: ", data.allStudent.data);
//     data.showList = data.allStudent.data
// });


// const serach = async () => {
//     // console.log(nameInput.value, phoneInput.value, available.value);
//     // 注意数据格式
//     let params = {
//         id: userAdmin.value.id,
//         userName: nameInput.value,
//         phone: phoneInput.value,
//         available: available.value
//     }
//     let res = {}
//     if (schoolAdmin.value) {
//         reset = await searchAllStudent(params);
//     } else {
//         res = await searchAllCollegeStudent(params);
//     }
//     data.showList = res.data
//     console.log('data.showList: ', data.showList);
// }

// const reset = () => {
//     nameInput.value = ''
//     phoneInput.value = ''
//     available.value = null
// }

</script >

<style lang="scss" scoped>
.head {
    display: flex;
    // justify-content: space-around;
    flex-wrap: wrap;
    .allBtn {
        margin: 10px;
    }
    .row {
        margin: 0 10px;
        min-width: 20vw;
        .title {
            font-size: 0.9rem;
            font-weight: bold;
        }
    }
}
</style>
